<script setup lang="jsx">
import { ref, computed, watch, h, shallowRef } from 'vue'
import { useRouter, RouterView } from 'vue-router'
import DraggableModal from '@/components/DraggableModal.vue'
import { NAvatar, NFormItem, NInput, NButton, NColorPicker, useMessage, NList, NListItem, NIcon, NCard, NDivider, NBadge, NSpace, NTag, NImage } from 'naive-ui'
import { globalVariable } from '@/stores/index.js'
import { LogOut, BookmarksSharp, LogoWechat } from '@vicons/ionicons5'
import { Eye, Search, Bell, CreditCard, User, ChevronRight } from '@vicons/fa'

const router = useRouter()
const message = useMessage()

// 模拟用户数据
const userInfo = ref({
  name: '张小明',
  avatar: 'https://picsum.photos/id/1005/200/200',
  email: 'zhangxm@example.com',
  phone: '138****6789',
  isLogoWechatBound: false,
  LogoWechatName: ''
})

// 功能列表数据
const menuItems = [
  {
    key: 'account',
    label: '账号管理',
    icon: User,
    badge: null
  },
  {
    key: 'transactions',
    label: '交易管理',
    icon: CreditCard,
    badge: null
  },
  {
    key: 'browsing',
    label: '浏览记录',
    icon: Eye,
    badge: {
      value: 12,
      type: 'info'
    }
  },
  {
    key: 'search',
    label: '检索记录',
    icon: Search,
    badge: {
      value: 8,
      type: 'info'
    }
  },
  {
    key: 'collections',
    label: '我的收藏',
    icon: BookmarksSharp,
    badge: {
      value: 23,
      type: 'info'
    }
  },
  {
    key: 'subscriptions',
    label: '我的订阅',
    icon: Bell,
    badge: {
      value: 3,
      type: 'warning'
    }
  }
]

// 当前选中的菜单项
const activeMenuItem = ref('account')

// 切换菜单项
const handleMenuClick = (key) => {
  activeMenuItem.value = key
}

// 绑定微信账号
const bindLogoWechat = () => {
  // 模拟绑定微信操作
  setTimeout(() => {
    userInfo.value.isLogoWechatBound = true
    userInfo.value.LogoWechatName = '微信用户_123456'
    message.success('微信绑定成功')
  }, 1000)
}

// 解绑微信账号
const unbindLogoWechat = () => {
  // 模拟解绑微信操作
  userInfo.value.isLogoWechatBound = false
  userInfo.value.LogoWechatName = ''
  message.success('微信解绑成功')
}

// 模拟登出操作
const logout = () => {
  // 清除用户信息并跳转到登录页
  message.info('已退出登录')
  setTimeout(() => {
    router.push('/')
  }, 1000)
}
</script>

<template>
  <div class="profile-layout">
    <!-- 左侧菜单 -->
    <aside class="left-sidebar">
      <!-- 用户信息卡片 -->
      <div class="user-info-card">
        <div class="user-avatar-section">
          <NAvatar
            :src="userInfo.avatar"
            class="user-avatar"
            alt="用户头像"
          />
          <h2 class="user-name">{{ userInfo.name }}</h2>
          <p class="user-email">{{ userInfo.email }}</p>
        </div>
      </div>
      
      <!-- 功能菜单 -->
      <NList class="menu-list">
        <NListItem
          v-for="item in menuItems"
          :key="item.key"
          :class="{ active: activeMenuItem === item.key }"
          class="menu-item"
          @click="handleMenuClick(item.key)"
        >
          <template #prefix>
            <NIcon :component="item.icon" />
          </template>
          {{ item.label }}
          <NBadge v-if="item.badge" :value="item.badge.value" :type="item.badge.type" class="menu-badge" />
          <template #suffix>
            <NIcon size="12" v-if="activeMenuItem === item.key">
              <ChevronRight class="active-icon" />
            </NIcon>
          </template>
        </NListItem>
      </NList>
      
      <!-- 底部操作区 -->
      <div class="bottom-actions">
        <NButton block type="primary" class="logout-button" @click="logout">
          <NIcon><LogOut /></NIcon>
          <span>退出登录</span>
        </NButton>
      </div>
    </aside>
    
    <!-- 右侧内容区域 -->
    <main class="main-content">
      <!-- 账号管理 -->
      <div v-if="activeMenuItem === 'account'" class="account-section">
        <h1 class="section-title">账号管理</h1>
        
        <NCard class="content-card">
          <div class="card-header">
            <NIcon><User /></NIcon>
            <span class="card-title">基本信息</span>
          </div>
          <div class="account-info">
            <div class="info-item">
              <span class="info-label">用户名:</span>
              <span class="info-value">{{ userInfo.name }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">邮箱:</span>
              <span class="info-value">{{ userInfo.email }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">手机号:</span>
              <span class="info-value">{{ userInfo.phone }}</span>
            </div>
          </div>
        </NCard>
        
        <NCard class="content-card">
          <div class="card-header">
            <NIcon><LogoWechat /></NIcon>
            <span class="card-title">微信绑定</span>
          </div>
          <div class="LogoWechat-binding">
            <div class="binding-status">
              <span class="status-label">绑定状态:</span>
              <NTag :type="userInfo.isLogoWechatBound ? 'success' : 'default'" class="status-tag">
                {{ userInfo.isLogoWechatBound ? '已绑定' : '未绑定' }}
              </NTag>
              <span v-if="userInfo.isLogoWechatBound" class="LogoWechat-name">{{ userInfo.LogoWechatName }}</span>
            </div>
            <div class="binding-action">
              <NButton 
                type="primary" 
                :disabled="userInfo.isLogoWechatBound"
                @click="bindLogoWechat"
              >
                <NIcon><LogoWechat /></NIcon>
                绑定微信
              </NButton>
              <NButton 
                v-if="userInfo.isLogoWechatBound" 
                danger 
                @click="unbindLogoWechat"
              >
                解除绑定
              </NButton>
            </div>
          </div>
        </NCard>
      </div>
      
      <!-- 交易管理 -->
      <div v-else-if="activeMenuItem === 'transactions'" class="transactions-section">
        <h1 class="section-title">交易管理</h1>
        <NCard class="content-card">
          <div class="card-header">
            <NIcon><CreditCard /></NIcon>
            <span class="card-title">交易记录</span>
          </div>
          <div class="empty-state">
            <p>暂无交易记录</p>
          </div>
        </NCard>
      </div>
      
      <!-- 浏览记录 -->
      <div v-else-if="activeMenuItem === 'browsing'" class="browsing-section">
        <h1 class="section-title">浏览记录</h1>
        <NCard class="content-card">
          <div class="card-header">
            <NIcon><Eye /></NIcon>
            <span class="card-title">最近浏览</span>
          </div>
          <div class="empty-state">
            <p>暂无浏览记录</p>
          </div>
        </NCard>
      </div>
      
      <!-- 检索记录 -->
      <div v-else-if="activeMenuItem === 'search'" class="search-section">
        <h1 class="section-title">检索记录</h1>
        <NCard class="content-card">
          <div class="card-header">
            <NIcon><Search /></NIcon>
            <span class="card-title">历史检索</span>
          </div>
          <div class="empty-state">
            <p>暂无检索记录</p>
          </div>
        </NCard>
      </div>
      
      <!-- 我的收藏 -->
      <div v-else-if="activeMenuItem === 'collections'" class="collections-section">
        <h1 class="section-title">我的收藏</h1>
        <NCard class="content-card">
          <div class="card-header">
            <NIcon><BookmarksSharp /></NIcon>
            <span class="card-title">收藏内容</span>
          </div>
          <div class="empty-state">
            <p>暂无收藏内容</p>
          </div>
        </NCard>
      </div>
      
      <!-- 我的订阅 -->
      <div v-else-if="activeMenuItem === 'subscriptions'" class="subscriptions-section">
        <h1 class="section-title">我的订阅</h1>
        <NCard class="content-card">
          <div class="card-header">
            <NIcon><Bell /></NIcon>
            <span class="card-title">订阅列表</span>
          </div>
          <div class="empty-state">
            <p>暂无订阅内容</p>
          </div>
        </NCard>
      </div>
    </main>
  </div>
</template>

<style scoped lang="scss">
// 主布局
.profile-layout {
  display: flex;
  height: 100vh;
  background-color: #f5f8fa;
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

// 左侧侧边栏
.left-sidebar {
  width: 260px;
  background: #fff;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 20px;
}

// 用户信息卡片
.user-info-card {
  flex: 0 0 fit-content;
  background: linear-gradient(135deg, #0F8AFF 0%, #0A6BFF 100%);
  color: white;
  border-radius: 12px;
  overflow: hidden;
  padding: 30px 20px;
  text-align: center;
}

.user-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  // width: 80px;
  // height: 80px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.3);
}

.user-name {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.user-email {
  font-size: 14px;
  opacity: 0.9;
  margin: 0;
}

// 功能菜单
.menu-list {
  flex: 1;
}

.menu-item {
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  &:hover {
    background-color: #f5f8fa;
  }
  &.active {
    background-color: #e8f3ff;
    color: #0F8AFF;
  }
}

.menu-badge {
  margin-left: 8px;
}

.active-icon {
  color: #0F8AFF;
}

// 底部操作区
.bottom-actions {
  margin-top: auto;
}

.logout-button {
  background: #ff4d4f;
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
  &:hover {
    background: #ff7875;
  }
}

// 右侧主内容区
.main-content {
  flex: 1;
  padding: 30px;
  overflow-y: auto;
}

// 区域标题
.section-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 24px;
  color: #1f2937;
}

// 内容卡片
.content-card {
  margin-bottom: 20px;
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 16px;
  font-weight: 500;
  color: #1f2937;
}

// 账号信息
.account-info {
  padding: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  &:last-child {
    border-bottom: none;
  }
}

.info-label {
  width: 100px;
  color: #6b7280;
  font-size: 14px;
}

.info-value {
  font-size: 14px;
  color: #1f2937;
  flex: 1;
}

// 微信绑定
.LogoWechat-binding {
  padding: 20px;
}

.binding-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.status-label {
  color: #6b7280;
  font-size: 14px;
  width: 100px;
}

.status-tag {
  font-size: 12px;
}

.LogoWechat-name {
  color: #1f2937;
  font-size: 14px;
}

.binding-action {
  display: flex;
  gap: 12px;
}

// 空状态
.empty-state {
  padding: 60px 20px;
  text-align: center;
  color: #6b7280;
}

// 响应式设计
@media (max-width: 768px) {
  .profile-layout {
    flex-direction: column;
  }
  
  .left-sidebar {
    width: 100%;
    height: auto;
    box-shadow: none;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .menu-list {
    display: flex;
    overflow-x: auto;
  }
  
  .menu-item {
    white-space: nowrap;
  }
  
  .main-content {
    padding: 20px;
  }
}
</style>